<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>routers</title>
</head>
<body>
    <div id="app">
        <p>
            <!-- 使用 router-link 组件导航 -->
            <!-- 通过传入的 to 属性指定链接 -->
            <!-- <router-lint> 默认会被渲染成一个 a 标签 -->
            <router-link to="/">主页</router-link>
                <router-link to="/News">新闻</router-link>
                <router-link to="/books">百度</router-link>
                <router-link to="/Videos">视频</router-link>
                <router-link to="demo">学习</router-link>
                <!-- 如果 to 后面出现了没有定义到位置会报 warning -->
        </p>

        <!-- 路由出口 -->
        <!-- 路由匹配到到组件将在这里渲染 -->
        <router-view></router-view>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@next"></script>
    <script type="module">
        // 定义路由组件
        // 可以从其他文件 import 进来
        const Home = {template: `<div>主页面</div>`}
        const News = {template: `<div>新闻</div>`}
        const Videos = {template: `<div>视频</div>`}
        const Books = {template: `<div>书籍</div>`}

        // 定义路由
        // 每个路由都应该映射到一个组件
        const routes = [
            {
                path: '/',
                component: Home,
            },
            {
                path: '/News',
                component: News
            },
            {
                path: '/books',
                component: Books
            },
            {
                path: '/Videos',
                component: Videos
            },{
                path: 'demo',
                component: demo
            }
        ];

        // 传递 routes 选项，创建 router 实例
        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes  // 相当于 routes: routes
        });

        const app = Vue.createApp({});

        app.use(router);
        app.mount('#app');
    </script>
</body>
</html>